import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Modal,
  FlatList,
  RefreshControl,
} from 'react-native';
import {useFocusEffect} from '@react-navigation/native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import {BottomTabScreenProps} from '@react-navigation/bottom-tabs';
import NavigationBar from '@/components/NavigationBar';
import FlatListItem from '@/components/FlatListItem';
import {useFlatListStore, type DataItem} from '@/store';
import {getFlatListData} from '@/mock';
import type {BottomTabParamList} from '../';

const dateArr = ['今天', '本周', '本月'];

const Trending: React.FC<
  BottomTabScreenProps<Pick<BottomTabParamList, 'Trending'>>
> = props => {
  const store = useFlatListStore();
  const [visible, setVisible] = React.useState(false);
  const [text, setText] = React.useState(dateArr[0]);
  const [loading, setLoading] = React.useState(false);

  useFocusEffect(
    React.useCallback(() => {
      if (!store.data2.length) {
        handleRefresh();
      }
    }, [store.data2]),
  );

  const handleUpdate = ({index}: {index: number}) => {
    const newListData = [...store.data2];
    newListData[index].isSave = !newListData[index].isSave;
    store.setStore('data2', newListData);
  };

  const handleRefresh = () => {
    setLoading(true);
    setTimeout(() => {
      const listData = getFlatListData();
      store.setStore('data2', listData);
      setLoading(false);
    }, 1000);
  };

  const handleDismiss = () => {
    setVisible(false);
  };

  const renderTitleRight = () => {
    return (
      <TouchableOpacity
        style={styles.titleRightWrap}
        onPress={() => setVisible(true)}>
        <Text>{text}</Text>
        <MaterialIcons name="keyboard-arrow-down" size={22} />
      </TouchableOpacity>
    );
  };

  return (
    <View style={styles.wrap}>
      <NavigationBar title="趋势" titleRight={renderTitleRight} />
      <FlatList<DataItem>
        keyExtractor={item => item.id}
        data={store.data2}
        initialNumToRender={10}
        refreshControl={
          <RefreshControl
            title="加载中..."
            refreshing={loading}
            onRefresh={handleRefresh}
          />
        }
        renderItem={({item, index}) => (
          <FlatListItem
            source="Trending"
            value={item}
            index={index}
            handleUpdate={handleUpdate}
          />
        )}
      />
      <Modal visible={visible} transparent={true} onDismiss={handleDismiss}>
        <TouchableOpacity style={styles.modalWrap} onPress={handleDismiss}>
          <View style={styles.modalContainer}>
            <MaterialIcons
              style={styles.iconWrap}
              name="arrow-drop-up"
              size={36}
            />
            <View style={styles.contentWrap}>
              {dateArr.map((item, index) => (
                <TouchableOpacity
                  key={index}
                  onPress={() => {
                    setText(item);
                    handleDismiss();
                    handleRefresh();
                  }}>
                  <Text
                    style={[
                      styles.dateText,
                      index === dateArr.length - 1 && styles.lastText,
                    ]}>
                    {item}
                  </Text>
                </TouchableOpacity>
              ))}
            </View>
          </View>
        </TouchableOpacity>
      </Modal>
    </View>
  );
};

export default Trending;

const styles = StyleSheet.create({
  wrap: {
    flex: 1,
  },
  titleRightWrap: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  modalWrap: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.4)',
  },
  modalContainer: {
    flex: 1,
    alignItems: 'center',
    marginLeft: 24,
  },
  iconWrap: {
    marginTop: 84,
    color: '#fff',
    padding: 0,
    margin: -15,
  },
  contentWrap: {
    backgroundColor: '#fff',
    borderRadius: 6,
    padding: 8,
  },
  dateText: {
    width: 50,
    fontSize: 16,
    textAlign: 'center',
    marginBottom: 4,
  },
  lastText: {
    marginBottom: 0,
  },
});
